<template>
	
	<view class="content login-page" >
		<view class="form">
			<view class="formInput">
				<view class="codeview" style="width:60%;">
				<image src="../../static/register/mb.png" style="width: 48rpx;height:48rpx;" mode="aspectFill"></image>
				<m-input type="text" clearable="true" id="phone" v-model="model.phone" placeholder="请输入手机号" :maxLength="18"  ></m-input>
				</view>
			</view>
			<view class="formInput">
			
				<view class="codeview" style="width:60%;">
					<image src="../../static/register/code.png" style="width: 48rpx;height:48rpx;" mode="aspectFill"></image>
					<m-input type="number" clearable="true" id="ddcode" v-model="model.code" placeholder="请输入短信验证码" :maxLength="4" ></m-input>
				</view>
				<view class="send" id="sendCode">
				   <button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
				</view>
			</view>	
			<view class="formInput">
				<view class="codeview" style="width:60%;">
				<image src="../../static/register/mm.png" style="width: 48rpx;height:48rpx;" mode="aspectFill"></image>
				<m-input type="password" clearable="true" id="newPassWord" v-model="model.newPassWord" placeholder="请设置新密码,6到16位" :maxLength="18"  ></m-input>
				</view>
			</view>	
			<view class="formInput">
				<view class="codeview" style="width:60%;">
				<image src="../../static/register/mm.png" style="width: 48rpx;height:48rpx;" mode="aspectFill"></image>
				<m-input type="password" clearable="true" id="passWordAgain" v-model="model.passWordAgain" placeholder="请输入确认密码" :maxLength="18"  ></m-input>
				</view>
			</view>	
		</view>
		<view class="btn-row"><button @tap="bindLogin" :loading="submitBtnDis">确认</button></view>
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import mInput from '@/components/m-input/m-input.vue';
import graceChecker from '@/common/graceChecker.js';
import formRuleConfig from '@/config/formRule.config.js';

export default {
	components: {
		mInput
	},
	data() {
		return {
			identityType:'',
			identityTypeShow:false,
			required:true,
			placeholderColor:"#f00",
			loginTitleTxt: this.$mConfig.loginTitleTxt,
			copyrightTxt: this.$mConfig.copyrightTxt,
			btnDis: false,
			submitBtnDis: false,
			btnText: '获取验证码',
			item:{
				id: 1,
				checked: false
			},
			model: {
				phone:'',
				name: '',
				newPassWord: '',
				passWordAgain:''
			},
			againPassword: '',
			hyList: [],
			identitys: ['个人','企业','政府'],
			identity: 0,
			selectShowHy: false,
			selectShowSf: false,
			labelPosition: 'left',
			params: {
				name: '',
				password: '',
				hy:'',
				sf:''
			},
			isAggre:1,//是否同意协议
			reqBody: {},
			// 如果为登录状态 默认跳转的地址
			redirectRoute: this.$mRoutesConfig.main,
			routeQuery: {},
			latitude:'',
			longitude:'',
			providerList: [],
			positionTop: 0,
			hasProvider: true,
			openid:'',
			userinfo:[],
			categoryList:[],
			industryShow:false,
			rangKey:'categoryType'
		};
	},
	onLoad(query) {
		this.initredirectRouteData(query);
		if(query.type && query.type=='msg'){
			//定位微信位置
			this.initPosition(query.type);
		}
		if(query.data){
			let result = JSON.parse(decodeURIComponent(query.data));
			this.openid = result.openid;
			this.userinfo = result.userinfo;
		} 
		if(query.hy){
			let hy = JSON.parse(decodeURIComponent(query.hy));
			if(hy){
				this.params = hy;
			}
		}
		// #ifdef APP-PLUS
		uni.hideTabBar();		
		// #endif
		
	},
	onShow(){
		this.initPosition();
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') {  
			return false;  
		}  
		this.back();  
		return true;  
    },  
	computed: {
		...mapGetters(['hasLogin'])	
	},
	onReady() {
		    
	},
	methods: {				
		 back() {  
		    uni.navigateBack({  
		        delta: 2 
		    });  
		} ,
		blue_input(){
			uni.hideKeyboard();			
		},
		 initPosition(flag) {
		    /**
		     * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
		     * 反向使用 top 进行定位，可以避免此问题。
		     */
			if(flag){
				 this.positionTop = uni.getSystemInfoSync().windowHeight - 60;
			}else{
				 this.positionTop = uni.getSystemInfoSync().windowHeight - 80;
			}
		},
		initredirectRouteData(query) {
			if (query.redirectUrl) {
				this.redirectRoute.path = query.redirectUrl;
				delete query.redirectUrl;
				this.routeQuery = query;
			}
		},
		// 注册
		async bindLogin() {
			var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
			if (!this.model.phone) {
				uni.showToast({
					title: "请输入手机号",
					icon: 'none'
				});
				return;
			}
			if (!/^1[23456789]\d{9}$/.test(this.model.phone)) {
			  uni.showToast({
			  	title: "请填写正确的手机号",
			  	icon: 'none'
			  });
			  return;
			}
			if (!this.model.code) {
				uni.showToast({
					title: "请输入短信验证码",
					icon: 'none'
				});
				return;
			}
			if (!this.model.newPassWord) {
				uni.showToast({
					title: "请输入密码",
					icon: 'none'
				});
				return;
			}
			if (!this.model.passWordAgain) {
				uni.showToast({
					title: "请输入确认密码",
					icon: 'none'
				});
				return;
			}
			if (this.model.passWordAgain != this.model.newPassWord) {
				uni.showToast({
					title: "确认密码和密码不一致",
					icon: 'none'
				});
				return;
			}
			try {
				this.reqBody['phone'] = this.model['phone'];
				this.reqBody['verificationCode'] = this.model['code'];
				this.reqBody['newPassword'] = this.model['newPassWord'];
				this.reqBody['againPassword'] = this.model['passWordAgain'];
				
				let data = await this.$apis.forgetPassword(this.reqBody);
				if(data.code == 200){
					this.$store.commit('SET_USERINFO', data.data || {});
					uni.showToast({
						title: "注册成功",
						icon: 'none'
					});
					this.$mRouter.push({
						route:this.$mRoutesConfig.complete
					});
					this.submitBtnDis = false;
				}else{
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
					this.submitBtnDis = false;	
					return;
				}
					this.submitBtnDis = false;	
			} catch (e) {
				console.log(e);
			}
		},
		selectConfirmHy(e) {
			this.model.hy = '';
			e.map((val, index) => {
				this.model.hy += this.model.hy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmSf(e) {
			if(e[0].value == "个人"){
				this.identity = 0
			}else if(e[0].value == "企业"){
				this.identity = 1
			}else if(e[0].value == "政府"){
				this.identity = 3
			}
			this.model.sf = '';
			e.map((val, index) => {
				this.model.sf += this.model.sf == '' ? val.label : '-' + val.label;
			});
		},
		
		toIndustry(){
			this.$mRouter.push({
				route:this.$mRoutesConfig.industry,
			 	query:{
			 		data:encodeURIComponent(JSON.stringify(this.params))
			 	}
			})
		},
		toIdentity(){
			this.$mRouter.push({
				route:this.$mRoutesConfig.identity,
			 	query:{
			 		data:encodeURIComponent(JSON.stringify(this.params))
			 	}
			})
		},
		// 发送验证码
		async sendCode() {
			console.log("phone",this.model.phone);
			if (!this.model.phone) {
				uni.showToast({
					title: "请输入手机号",
					icon: 'none'
				});
				return;
			}
			if (!/^1[34578]\d{9}$/.test(this.model.phone)) {
			  uni.showToast({
			  	title: "请填写正确的手机号",
			  	icon: 'none'
			  });
			  return;
			}
		    //#ifdef APP-PLUS
			//let clientId = plus.push.getClientInfo().clientid;
			//#endif
			await this.$apis.getSmsCode({
				phone: this.model.phone
			});
		
			// uni.showToast({
			// 	title: '发送成功'
			// });
			// 开启倒计时
			this.countDown();
		},
		
		// 验证码倒计时
		countDown() {
			let t = null;
			let timer = 60;
			this.btnDis = true;
			clearInterval(t);
			this.btnText = `${timer}s`;
			t = setInterval(() => {
				if (timer == 0) {
					clearInterval(t);
					this.btnText = '重新发送';
					this.btnDis = false;
					return;
				}
				timer--;
				this.btnText = `${timer}s`;
			}, 1000);
		},
		async bindHome(){
			uni.switchTab({
				url: '/pages/main/main'
			});
		},
		toAgreement(type){
			uni.navigateTo({
				url: '/pages/login/agreement?type='+type
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	
	page {padding-bottom:150rpx;}
	
	.form {
		padding:100rpx 40rpx 90rpx 40rpx;
		box-sizing: border-box;
		.formInput {
			width: 100%;
			// background:rgba(255,255,255,1);
			border-bottom:1px solid #DADEED;
			height: 88rpx;
			line-height: 88rpx;			
			margin-bottom:40rpx;
			padding-bottom:35rpx;
			color: #000;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			.codeview{				
				display: flex;
				align-items: center;
				justify-content: space-between;
				input {
					padding: 0 20rpx;
					font-size:$uni-font-size-base;
				}
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			
			.send {
				height: 100%;
				border-radius: 0 4rpx 4rpx 0rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				flex:1;
				justify-content: center;
			}
	
			.button {
				height: 100%;
				width: 100%;
				color:#AB61FF;
			}
	     
		}
	
		.menus {
			margin-top: 17rpx;
			display: flex;
			font-size: 28rpx;
			justify-content: space-between
		}
	    .xieyi{
			width: 100%;
		
			margin-top: 30rpx;

			.xieyi-text{
				font-size: 24rpx;
				color: #cccccc;
				display: flex;
				justify-content: left;	
				align-items: center;
			}
			.xieyi-fwxy{
				font-family: PingFang-SC-Medium;
				font-size: 24rpx;
				font-weight: normal;
		
				color: #2a9f93;
			display: flex;
			justify-content: left;	
			}
	   }
	
	}
	
	.btn-row {
		padding:0 57rpx 20rpx 57rpx;
	}
	
	button,button[type=primary] {
			background:#AB61FF;
			border-radius:40rpx;
			color:#fff;
			border:0;
			z-index: 20;
	}
		button[disabled][type=primary],button[disabled] {
			color: #fff;
			background:#AB61FF;
			border-radius:40rpx;
		}
	.tyxy{
		background-color: #AB61FF;
		border-radius: 50%;
	}
	.zcxy{
		display: flex;
		// flex-wrap: nowrap;
		align-items: center;
		margin-left: 100rpx;
		image{
			margin-left: 100rpx;
			width: 48rpx;
			height: 48rpx;
			
		}
		.tybyd{
			font-size: 24rpx;
			color: #9DA2B0;
					
		}
		.fwxy{
			font-size: 24rpx;
			color: #FF9E21;
		}
		
	}
	
	.sendCode {
		flex:1;
		display: flex;
		align-items: right;
		flex-direction:row-reverse;
		box-sizing: border-box;
		align-items: stretch;
	
		//width:230upx;
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width:230upx;
			background: #fff;
			color: #2a9f93;
			border-radius: 30px;
	        border: solid 1px #2a9f93;
			font-size: 24upx;
		
			&::after{
				display: none;
			}
		}
	}
	.tips {color: #9DA1AF;}
</style>